<template>
    <div class="index">
        <router-view>
            <nav>
                <ul>
                    <li>
                        <i class="iconfont icon-dongtai"></i>
                        <span>
                        动态
                    </span>
                    </li>
                    <li>
                        <i class="iconfont icon-faxian"></i>
                        <span>
                        发现
                    </span>
                    </li>
                    <li>
                        <i class="iconfont icon-yundong"></i>
                        <span>
                        运动
                    </span>
                    </li>
                    <li>
                        <i class="iconfont icon-xiaoxi"></i>
                        <span>消息</span>
                    </li>
                    <router-link to="/index/my">
                        <li>
                            <i class="iconfont icon-wode"></i>
                            <span>我的</span>
                        </li>
                    </router-link>
                </ul>
            </nav>
        </router-view>
      <!--   <canvas ref="canvas" :width="canvasWidth" :height="canvasHeight"></canvas> -->
    </div>

</template>

<script>
    export default {
        name: "Index",
        data(){
            return{
                /* canvasWidth:0,
                canvasHeight:0 */
            }
        },
       /*  mounted() {
            this.canvasWidth=document.documentElement.clientWidth
            this.canvasHeight=document.documentElement.clientHeight
            let canvas=this.$refs.canvas
            let ctx=canvas.getContext('2d')
            let w,h
            w=document.documentElement.clientWidth
            h=document.documentElement.clientHeight

            function Ball(x, y) {
                this.x = x
                this.y = y
                this.r = 35
                this.color = `#${(Math.random() * 0xFFFFFF >>> 0).toString(16)}`
            }

            Ball.prototype.show = function () {
                this.r--
                drawCircle(this.x, this.y,this.r, this.color)
                return this
            }

            let ballArr = []

            document.body.addEventListener('touchmove',mouseHandler)
            document.body.addEventListener('touchstart',mouseHandler)

            function mouseHandler(e){
                let ball=new Ball(e.targetTouches[0].clientX,e.targetTouches[0].clientY)
                ballArr.push(ball)
            }

            function update() {
                requestAnimationFrame(update)
                ctx.clearRect(0, 0, w, h)
                ballArr.forEach((n, i) => {
                    if (n.r <= 0) {
                        ballArr.splice(i, 1)
                    } else {
                        n.show()
                    }
                })
            }
            update()

            function drawCircle(x, y, r, color) {
                ctx.beginPath()
                ctx.fillStyle = color
                ctx.arc(x, y, r, 0, Math.PI * 2)
                ctx.fill()
            }
        } */
    }
</script>

<style lang="stylus" scoped>
    canvas{
        position absolute
        top 0
        left 0
        z-index -1
    }
    .index {
        height 100vh
        overflow-y scroll
        overflow-x hidden

    }

    nav {
        width: 100%
        height: 0.64rem
        position: absolute;
        bottom 0
        left 0
        box-shadow: 0 0.02rem 0.15rem rgba(0, 0, 0, .45);
    }

    nav ul {
        display flex
        justify-content space-around
    }

    nav ul li {
        display flex
        flex-direction column
        justify-content center
        align-items center
        color #cccccc
    }


    .iconfont {
        font-size 0.22rem
    }

</style>